<Html>
    <head>
        <title>transation 过渡动画</title>
    </head>
    <body>
        <script>
            /*
                 五、Transition过渡动画

                            transition 允许css的属性值在一定的时间区间内平滑的过渡。

                            1、transition-property: 

                                    设置参与过渡动画的属性名，设置不同样式 transition 效果的键值对，默认为空，表示不执行任何过渡效果。


                                           参数名               描述

                                           width                宽度参与过渡动画

                                           height               高度参与过渡动画

                                           top                  顶部距离参与过渡东湖

                                           bottom               底部距离参与过渡动画

                                           left                 左侧距离参与过渡动画

                                           right                右侧距离参与过渡动画 

                                           background-color     背景颜色参与过渡动画

                                           opacity              透明度参与过渡动画

                                           transform            变换类型参与过渡动画


                            2、transition-duration
                                    
                                     指定过渡的持续时间(单位毫秒)，默认值是0，表示没有动画效果。


                            3、transition-delay

                                     指定请求过渡操作到执行过度之间的时间间隔(单位是毫秒或者秒)，默认值是0，表示没有延迟，在请求后立即执行过度。


                            4、transition-timing-function

                                    描述过渡的速度曲线，用于使过渡更为平滑。默认值是 ease 下表列出了所有合法的属性：


                                              参数名                描述

                                              ease                 transition 过渡逐渐变慢的过渡效果

                                              ease-in              transition 过渡慢速开始，然后变快的过渡效果

                                              ease-out             transition 过渡快速开始，然后变慢的过渡效果

                                              ease-in-out          transition 过渡慢速开始，然后变快，然后慢速结束的过渡效果

                                              linear               transition 过渡以匀速变化

                                              cubic-bezier(x1, y1, x2, y2)    使用三阶贝塞尔函数中自定义 transition 变化过程，
                                              
                                                                             函数的参数值必须处于 0 到 1 之间。更多关于三次贝塞尔的信息请参阅 cubic-bezier和 Bézier curve   

                                                                             https://cubic-bezier.com/?spm=a2c7j.-zh-docs-styles-common-styles.0.0.3f952164z39lZD#.17,.67,.83,.67

                                                                             https://en.wikipedia.org/wiki/B%C3%A9zier_curve?spm=a2c7j.-zh-docs-styles-common-styles.0.0.3f952164z39lZD


                                   eg：

                                            <template>
                                                <view class="row">
                                                    <view class="box" :class="{'active':isActive}" @click="isActive = !isActive">
                                                        <image class="img" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/loveIcon.png" mode="aspectFill"></image>
                                                    </view>
                                                </view>
                                            </template>
                                            <script>
                                                export default {
                                                    data() {
                                                        return {
                                                            "isActive":false
                                                        }
                                                    }
                                                }
                                            <、/script>
                                            <style scoped>
                                                .row{
                                                    align-items: center;
                                                    justify-content: center;
                                                }
                                                .box{
                                                    margin:20px;
                                                    align-items: center;
                                                    justify-content: center;
                                                    border-radius: 10px;
                                                    width:200rpx;
                                                    height:200rpx;
                                                    background-color: #007AFF;
                                                    transition-property: width, height, background-color;
                                                    transition-duration:0.3s;
                                                    transition-delay:0.1s;
                                                    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
                                                }
                                                .active{
                                                    width:300rpx;
                                                    height:300rpx;
                                                    background-color: #6bd8ff;
                                                }
                                                .img{
                                                    width:80rpx;
                                                    height:80rpx;
                                                }
                                            </style>
            */
        </script>
    </body>
</Html>